<template>
  <van-nav-bar
    title="注册"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <van-empty description="我们将以短信的形式将验证码发送到您的手机" />

  <van-cell-group inset>
    <van-field
      v-model.trim="sms"
      center
      clearable
      placeholder="请输入短信验证码"
    >
      <template #button>
        <van-button size="small" type="primary" @click="onSendNum"
          >发送验证码</van-button
        >
      </template>
    </van-field>
  </van-cell-group>
  <van-button type="primary" round size="large" @click="onClickGo"
    >下一步</van-button
  >
</template>

<script>
import { getTelNumApi, getVerifyCodeApi } from "@/api/my.js";
import { showToast } from "vant";
export default {
  data() {
    return {
      sms: "",
      tel: sessionStorage.getItem("tel"),
    };
  },
  methods: {
    // 标题按钮
    onClickLeft() {
      // 返回上一级
      this.$router.back(-1);
    },
    // 判断是否存在电话号码
    hasMobileNum() {
      if (!sessionStorage.getItem("tel")) {
        showToast("你好，请先输入手机号码！");
        return false;
      } else {
        return true;
      }
    },
    // 获取验证码
    async onSendNum() {
      if (!this.hasMobileNum()) return;
      let res = await getTelNumApi({
        tel: this.tel,
      });
      if (res.data.code === "200") {
        // this.sms = res.data.data;
        showToast("您的验证码是：" + res.data.data);
      }
    },
    async onClickGo() {
      if (!this.hasMobileNum()) return;
      if (this.sms == "") {
        showToast("请输入验证码！");
        return;
      }
      let res = await getVerifyCodeApi({
        tel: this.tel,
        telcode: this.sms,
      });
      if (res.data.code === "200") {
        this.$router.push("/SetPass");
      } else {
        showToast("你好，验证码过期或者错误，请重新输入！");
      }
    },
  },
};
</script>

<style></style>
